<template>
  <div class="layout_main">
    <div class="head_base">
      <div class="head_logo">
        <img src="~@/assets/image/head_logo.png" class="logo" alt="logo" @click="gotoHome()" />
      </div>
      <div class="head_router">
        {{ routerName }}
      </div>
    </div>
    <div class="content_main"><router-view /></div>
    <global-footer />
  </div>
</template>

<script>
import { constantRouterMap } from '@/config/router.config'
import GlobalFooter from '@/components/FixedUser/GlobalFooter'
export default {
  name: 'FixedLayoutShare',
  components: {
    GlobalFooter
  },
  data() {
    return {}
  },
  computed: {
    routerName() {
      const currentRoute = this.$route.path
      const routes = constantRouterMap.find(item => item.path === '/user')
      const routeOne = routes.children.find(item => currentRoute === `/user/${item.path}`)
      return routeOne.meta.title || ''
    }
  },
  methods: {
    gotoHome() {
      this.$router.push('/home')
    }
  }
}
</script>

<style lang="less" scoped>
@import '../components/index.less';
.layout_main {
  min-width: 1280px;
  min-height: 100vh;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: auto;
  -ms-flex: auto;
  -moz-flex: auto;
  flex: auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background: #f0f2f5;
}
.content_main {
  -webkit-flex: auto;
  -ms-flex: auto;
  -moz-flex: auto;
  flex: auto;
  height: calc(100vh - 158px);
}
.head_base {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: @bg-color;
  color: #ffffff;
}
// 首页有滚动条，每个部分不要用百分比，设置最小宽度
.head_logo {
  min-width: 124px;
  margin-left: 22px;
  .logo {
    width: 124px;
    height: 30px;
  }
  .logo:hover {
    cursor: pointer;
  }
}
.head_router {
  min-width: 420px;
  margin-left: 12px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-left: 1px solid #ffffff;
  font-size: 24px;
  padding-left: 12px;
}
</style>
